<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table {
            width: 1000px;
            /* height: 300px; */
            border-collapse: collapse;
            table-layout: fixed;
            text-align: center;
            font-size: 18px;
            margin: 0 auto;
        }

        a {
            text-decoration: none;
            color: black;
        }

        tr {
            height: 50px;
        }

        .check {
            width: 20px;
            height: 20px;
        }

        .checkOnly {
            width: 20px;
            height: 20px;
        }

        .empty {
            font-size: 25px;
            position: fixed;
            top: 45%;
            left: 45%;
            display: none;
        }

        .empty a {
            color: pink;
        }

        .empty a:hover {
            text-decoration: underline;
        }
    </style>

</head>
<body>
<div class="empty">
    购物车空空如也，<a href="javascript:void(0);">快去选购吧</a>
</div>
<table border="2px solid #ccc" id="table">
    <caption style="font-size:28px;font-weight: bolder;">我的购物车</caption>
    <thead>
    <th>
        <input type="checkbox" class="checkOnly" style="vertical-align:middle;margin-right:20px;">全选
    </th>
    <th>序号</th>
    <th>商品名称</th>
    <th>数量</th>
    <th>单价</th>
    <th>小计</th>
    <th>操作</th>
    </thead>
    <tbody>
    <tr>
        <td>
            <input type="checkbox" class="check">
        </td>
        <td class="num">1</td>
        <td>烤煎饼</td>
        <td>
                    <span>
                        <input type="button" value="-" class="reduces">
                        <span class="span">1</span>
                        <input type="button" value="+" class="adds">
                    </span>
        </td>
        <td>单价：
            <span class="price">2</span>
        </td>
        <td>
            小计：
            <span class="prices">2</span>
        </td>
        <td>
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="check">
        </td>
        <td class="num">2</td>
        <td>珍珠奶茶</td>
        <td>
                    <span>
                        <input type="button" value="-" class="reduces">
                        <span class="span">1</span>
                        <input type="button" value="+" class="adds">
                    </span>
        </td>
        <td>单价：
            <span class="price">4</span>
        </td>
        <td>
            小计：
            <span class="prices">4</span>
        </td>
        <td>
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="check">
        </td>
        <td class="num">3</td>
        <td>水煮鱼</td>
        <td>
                    <span>
                        <input type="button" value="-" class="reduces">
                        <span class="span">1</span>
                        <input type="button" value="+" class="adds">
                    </span>
        </td>
        <td>单价：
            <span class="price">20</span>
        </td>
        <td>
            小计：
            <span class="prices">20</span>
        </td>
        <td>
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="check">
        </td>
        <td class="num">4</td>
        <td>蛋糕</td>
        <td>
                    <span>
                        <input type="button" value="-" class="reduces">
                        <span class="span">1</span>
                        <input type="button" value="+" class="adds">
                    </span>
        </td>
        <td>单价：
            <span class="price">50</span>
        </td>
        <td>
            小计：
            <span class="prices">50</span>
        </td>
        <td>
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="check">
        </td>
        <td class="num">5</td>
        <td>土豆片</td>
        <td>
                    <span>
                        <input type="button" value="-" class="reduces">
                        <span class="span">1</span>
                        <input type="button" value="+" class="adds">
                    </span>
        </td>
        <td>单价：
            <span class="price">5</span>
        </td>
        <td>
            小计：
            <span class="prices">5</span>
        </td>
        <td>
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="check">
        </td>
        <td class="num">6</td>
        <td>蛋黄派</td>
        <td>
                    <span>
                        <input type="button" value="-" class="reduces">
                        <span class="span">1</span>
                        <input type="button" value="+" class="adds">
                    </span>
        </td>
        <td>单价：
            <span class="price">5.5</span>
        </td>
        <td>
            小计：
            <span class="prices">5.5</span>
        </td>
        <td>
            <a href="#" class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td colspan="7" class="talast">
                    <span>商品一共
                        <span class="goods_num" style="color:red;font-size:20px;">0</span> 件; 共计花费
                        <span class="pricetal" style="color:red;font-size:20px;">0</span> 元; 其中最贵的商品单价是
                        <span class="pricest" style="color:red;font-size:20px;">0</span> 元</span>
        </td>
    </tr>
    </tbody>
</table>
<script src="js/jquery-3.4.1%20.js"></script>
<script>
    $(function () {
        let total = 0;
        let totalNum = 0;
        let pricest = 0;
        $('thead').find('th').filter(':first').children('.checkOnly').click(function () {
            $('tbody>tr:lt(6)').each(function (index,docEle) {//全选功能
                $(this).find('.check').prop({checked:'checked'});
                totalNum = 6;
                $('.talast .goods_num').html(totalNum);
                pricest = 50;
                $('.talast .pricest').html(pricest);
                /*$('tbody>tr:lt(6)').each(function (index,price) {*/
                    let temp = $(this).find('.prices').html();
                    total += parseInt(temp);
                /*})*/
                console.log(total);
                $('.talast .pricetal').html(total);
            })
        })

        $('tbody tr').each(function (index,trSelect) {//单选功能
            $(trSelect).find('.check').on('click',function () {
                if ($(trSelect).find('.check').prop('checked')){
                    let isSel = false;
                    $('tbody tr').find('.check').each(function (index,allSelect) {
                        if (!$(allSelect).prop('checked')) {
                            isSel = true;
                        }
                    })
                    if (!isSel){
                        $('.checkOnly').prop('checked',true);
                    }
                    let thisTotal = $(trSelect).find('.prices').html();
                    let ptt = parseFloat(thisTotal);
                    total += ptt;
                    $('.talast .pricetal').html(total);
                    let thisNum = $(trSelect).find('.span').html();
                    let ptn = parseFloat(thisNum);
                    totalNum += ptn;
                    $('.talast .goods_num').html(totalNum);
                    let thisPrice = $(trSelect).find('.price').html();
                    if (thisPrice > pricest) {
                        pricest = thisPrice;
                        $('.talast .pricest').html(pricest);
                    }
                }else{
                    $('.checkOnly').prop('checked',false);
                    let thisTotal = $(trSelect).find('.prices').html();
                    let ptt = parseFloat(thisTotal);
                    total -= ptt;
                    $('.talast .pricetal').html(total);
                    let thisNum = $(trSelect).find('.span').html();
                    let ptn = parseFloat(thisNum);
                    totalNum -= ptn;
                    $('.talast .goods_num').html(totalNum);
                    let thisPrice = $(trSelect).find('.price').html();
                    if (thisPrice == pricest){
                        let max = 0;
                        let parTPrice = 0;
                        $('tbody tr').each(function (index,noSelect) {
                            if ($(noSelect).find('.check').prop('checked')){
                                let tPrice = $(noSelect).find('.price').html();
                                parTPrice = parseFloat(tPrice);
                                if (parTPrice > max){
                                    max = parTPrice;
                                }
                            }
                        })
                        pricest = max;
                        $('.talast .pricest').html(pricest);
                    }
                }
            })

        })
        //单击的加减功能
        $('tbody tr').each(function (index,addOrRed) {
            let $add = $(addOrRed).find('.adds');
            let $reduce = $(addOrRed).find('.reduces');
            $add.click(function () {
                if ($(addOrRed).find('.check').prop('checked')){
                    let thisNum = $(addOrRed).find('.span').html();
                    let ptn = parseFloat(thisNum);
                    ptn++;
                    $(addOrRed).find('.span').html(ptn);
                    totalNum++;
                    $('.talast .goods_num').html(totalNum);
                    let thisPrice = $(addOrRed).find('.price').html();
                    let ptp = parseFloat(thisPrice);
                    total += ptp;
                    $('.talast .pricetal').html(total);
                    let thisTotal = $(addOrRed).find('.prices').html();
                    let ptt = parseFloat(thisTotal);
                    ptt += ptp;
                    $(addOrRed).find('.prices').html(ptt);
                }
            })
            $reduce.click(function () {
                if ($(addOrRed).find('.check').prop('checked')){
                    let thisNum = $(addOrRed).find('.span').html();
                    let ptn = parseFloat(thisNum);
                    if (ptn > 0){
                        ptn--;
                        $(addOrRed).find('.span').html(ptn);
                        totalNum--;
                        $('.talast .goods_num').html(totalNum);
                        let thisPrice = $(addOrRed).find('.price').html();
                        let ptp = parseFloat(thisPrice);
                        total-= ptp;
                        $('.talast .pricetal').html(total);
                        let thisTotal = $(addOrRed).find('.prices').html();
                        let ptt = parseFloat(thisTotal);
                        ptt -= ptp;
                        $(addOrRed).find('.prices').html(ptt);
                    } else {
                        window.alert("不能再减少了！")
                    }
                }
            })
        })
        $('tbody tr').each(function (index,tr) {//删除功能
            let $delete = $(tr).children('td').children('.del');
            $delete.click(function () {
                let index = $delete.index();
                if (window.confirm('你确定删除吗？')){
                    $(tr).nextAll().each(function (index,son) {
                        let number = $(son).find('.num').html();
                        let newNumber = parseInt(number) - 1;
                        $(son).find('.num').html(newNumber);
                    })
                    let thisNum = $(tr).find('.span').html();
                    let ptn = parseFloat(thisNum);
                    totalNum -= ptn;
                    $('.talast .goods_num').html(totalNum);
                    let thisTotal = $(tr).find('.prices').html();
                    let ptt = parseFloat(thisTotal);
                    total -= ptt;
                    $('.talast .pricetal').html(total);
                    let thisPrice = $(tr).find('.price').html();
                    let ptp = parseFloat(thisPrice);
                    console.log(ptp);
                    console.log(pricest);
                    if (ptp == pricest){
                        let max = 0;
                        let parTPrice = 0;
                        $('tbody tr').each(function (index,remove) {
                            if ($(remove).find('.check').prop('checked')){
                                let tPrice = $(remove).find('.price').html();
                                parTPrice = parseFloat(tPrice);
                                if (pricest != parTPrice){
                                    if (parTPrice > max){
                                        max = parTPrice;
                                        console.log(max);
                                    }
                                }
                            }
                        })
                        pricest = max;
                        $('.talast .pricest').html(pricest);
                    }
                    $(tr).remove();
                }
            })
        })
    })
</script>
</body>
</html>